<template>
    <div class="menu-container">
        <div class="menu_container_body">
            <el-row>
                <el-col :span="8">
                    <div id="menu-content">
                        <div class="leftBtm">
                            <!-- <el-button type="primary" size="mini">展开</el-button>
                            <el-button type="primary" size="mini">缩放</el-button>-->
                            <el-button
                                type="primary"
                                size="mini"
                                style="float:right;margin-right:20px;"
                                icon="el-icon-plus"
                                title="添加一级菜单"
                                @click="addMenuTop()"
                            >添加一级菜单</el-button>
                        </div>
                        <el-scrollbar
                            wrap-class="side-bar-scrollbar-wrap"
                            view-class="side-bar-scrollbar-view"
                            class="elTree_wrap"
                        >
                            <el-tree
                                :data="menuList"
                                node-key="id"
                                ref="tree"
                                highlight-current
                                @node-click="getInitData"
                                :check-on-click-node="true"
                                :expand-on-click-node="true"
                                :props="defaultPropsTree"
                                :accordion="true"
                            >
                                <span slot-scope="{ node, data }">
                                    <span class="el-tree-node__label" style="padding-left: 4px">
                                        <span
                                            :title="node.label"
                                        >{{ node.label }} --- 序号{{data.menuSort}}</span>
                                        <span class="menuIcon">
                                            <i
                                                class="el-icon-plus"
                                                title="添加菜单"
                                                @click="addMenu(node, data)"
                                            ></i>
                                            <i
                                                class="el-icon-edit"
                                                title="编辑菜单"
                                                @click="editMenu(node, data)"
                                            ></i>
                                            <i
                                                class="el-icon-delete"
                                                title="删除菜单"
                                                @click="deleteMenu(node, data)"
                                            ></i>
                                        </span>
                                    </span>
                                </span>
                            </el-tree>
                        </el-scrollbar>
                    </div>
                </el-col>
                <el-col :span="16">
                    <div class="bgimg">
                        <img src="@/assets/img/khindex/bj123.png" alt width="100%" />
                    </div>
                </el-col>
            </el-row>
        </div>

        <el-dialog
            v-drag
            :close-on-click-modal="false"
            :visible.sync="Show"
            append-to-body
            center
            width="500px"
        >
            <div slot="title">{{ EditTitle }}</div>
            <el-form
                ref="form"
                class="menu-setting"
                size="small"
                :model="form"
                :rules="rules"
                label-width="120px"
            >
                <el-form-item label="菜单类型" prop="category">
                    <el-select v-model="form.category" class="input_width" disabled style clearable>
                        <el-option label="模块菜单" value="1"></el-option>
                        <el-option label="业务菜单" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否启用" prop="isUsable">
                    <el-select v-model="form.isUsable" class="input_width" clearable>
                        <el-option label="停用" value="0"></el-option>
                        <el-option label="启用" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否可见" prop="isVisible">
                    <el-select v-model="form.isVisible" class="input_width" clearable>
                        <el-option label="不可见" value="0"></el-option>
                        <el-option label="可见" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单名称" prop="menuName">
                    <el-input v-model="form.menuName" class="input_width" />
                </el-form-item>
                <!-- <el-form-item label="菜单路径" prop="menuLink">
                <el-input v-model="form.menuLink"/>
                </el-form-item>-->
                <el-form-item label="菜单图标" v-if="form.parentSid === 0 ? true : false">
                    <el-input v-model="form.menuIcon" class="input_width" />
                </el-form-item>
                <el-form-item label="上级菜单" v-if="flag">
                    <select-tree
                        v-model="form.parentSid"
                        :disabled="flag"
                        class="input_width"
                        :options="menuList"
                        :props="defaultProps"
                    ></select-tree>
                </el-form-item>
                <el-form-item label="序号" prop="menuSort">
                    <el-input type="number" v-model="form.menuSort" class="input_width" />
                </el-form-item>
                <el-form-item label="路由名称" prop="routerName">
                    <el-input v-model="form.routerName" class="input_width" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button
                    size="small"
                    icon="el-icon-circle-close"
                    @click="Show = false"
                    class="cancelBtn"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="submitEdit"
                    class="submitBtn"
                    icon="el-icon-circle-check"
                >确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// import { mapState } from "vuex";
import SelectTree from '@/components/SelectTree/SelectTree.vue';
import { getDictFromBankNum, getDictSelectList } from '@/utils/Common';

export default {
    name: 'menusetting',
    computed: {
        // ...mapState({ VALIDRULE: state => state.common.VALIDRULE }) // 菜单校验菜单
    },
    data() {
        const validatemenuSort = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入序号'));
            } else {
                if (value.toString().length > 6) {
                    callback(new Error('字符最大长度为6'));
                }
                callback();
            }
        };
        return {
            labelValue: '客户视图 - 校验规则',
            menuList: [],
            selections: [],
            tableData: [],
            tableSAFETY: [],
            tableACCOUNT: [],
            tableSTATUS: [],
            Show: false,
            EditTitle: '添加菜单',
            flag: true,
            ruleTableflag: false,
            form: {
                category: '1',
                isUsable: '1',
                isVisible: '1',
                menuName: '',
                menuIcon: '',
                parentSid: '',
                menuSort: '',
                // menuLink: '',
                routerName: '',
            },
            radioSAFETY: '',
            rules: {
                category: [
                    { required: true, message: '请选择菜单类型', trigger: 'change' },
                ],
                isUsable: [
                    { required: true, message: '请选择是否启用', trigger: 'change' },
                ],
                isVisible: [
                    { required: true, message: '请选择是否可见', trigger: 'change' },
                ],
                menuName: [
                    { required: true, message: '请输入菜单名称', trigger: 'blur' },
                    { max: 30, message: '字符最大长度为30', trigger: 'blur' },
                ],
                parentSid: [
                    { required: true, message: '请输入菜单所属父id', trigger: 'change' },
                ],
                menuSort: [
                    {
                        required: true,
                        message: '菜单排序id只能输入数字',
                        trigger: 'blur',
                    },
                    { validator: validatemenuSort, trigger: 'blur' },
                ],
                // menuLink: [
                //   { required: true, message: '请输入菜单路径', trigger: 'blur' },
                // ],
                routerName: [
                    { required: true, message: '请输入路由名称', trigger: 'blur' },
                    { max: 50, message: '字符最大长度为50', trigger: 'blur' },
                ],
            },
            defaultPropsTree: {
                label: 'menuName',
                children: 'child',
            },
            validrulePropsTree: {
                label: 'label',
            },
            defaultProps: {
                parent: 'pid',
                value: 'id',
                label: 'menuName',
                children: 'child',
            },
            rowObj: {},
            tableSAFETY: [],
        };
    },
    created() {
        this.getMenuInfo();
        this.getValidruleDate();
    },
    methods: {
        // 添加一级菜单
        addMenuTop() {
            this.Show = true;
            this.EditTitle = '添加一级菜单';
            this.form = {};
            this.form.isUsable = '1';
            this.form.isVisible = '1';
            if (this.$route.path === '/manage/menusetting') {
                this.form.category = '1';
            } else {
                this.form.category = '2';
            }
            this.form.parentSid = 0;
            this.flag = false;
            // 解决一进来就进行表单验证问题
            if (this.$refs.form) {
                this.$refs.form.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.form.resetFields();
                });
            }
        },
        // 获取当前点击项的验证规则  //系统菜单
        getDictDetailIdsByMenuId() {
            this.$post.nebulaApi
                .getDictDetailIdsByMenuId({ menuId: this.rowObj.id })
                .then((res) => {
                    // console.log(res.data.content);
                    if (res.data.success) {
                        const activeID = res.data.content;
                        // console.log(activeID);
                        // 从返回的数组从，单独判断安全级别单选框的值是否存在
                        // console.log(this.tableSAFETY,'this.tableSAFETY');
                        this.$nextTick(() => {
                            let activeSAFETYID;
                            activeID.forEach((item) => {
                                this.tableSAFETY.forEach((tableId) => {
                                    if (tableId.id === item) {
                                        activeSAFETYID = item;
                                        return false;
                                    }
                                });
                            });
                            console.log(activeSAFETYID);
                            // 将激活的值赋值给安全级别
                            this.radioSAFETY = activeSAFETYID;
                            this.$refs.VALIDRULE_CARD_STATUS.setCheckedKeys(activeID);
                            this.$refs.VALIDRULE_ACCOUNT_TYPE.setCheckedKeys(activeID);

                            this.$refs.VALIDRULE.setCheckedKeys(activeID);

                        });
                    }
                });
        },
        handleSelectChange(val) {
            const arr = [];
            val.forEach((item) => {
                arr.push(item.id);
            });
            this.selections = arr;
        },
        // 获取规则列表在mounted钩子函数获取并建立好数据
        async getValidruleDate() {
            console.log('进来了');
            const tableData = await getDictSelectList('VALIDRULE', this);
            // 将安全级别单独存到data中，方便判断获取到的id是否存在
            this.tableSAFETY = await getDictFromBankNum('VALIDRULE_SAFETY', this);
            const tableACCOUNT =
                (await getDictFromBankNum('VALIDRULE_ACCOUNT_TYPE', this)) || [];

            console.log(tableACCOUNT, 'tableACCOUNT进来了');
            const tableSTATUS = await getDictFromBankNum(
                'VALIDRULE_CARD_STATUS',
                this
            );
            this.tableData = [
                { type: '禁止账户类别', val: tableACCOUNT },
                { type: '安全级别', val: this.tableSAFETY },
                { type: '禁止卡状态', val: tableSTATUS },
                { type: '其他验证', val: tableData },
            ];

            // console.log(this.tableData,'进来了');
            // this.tableData = this.VALIDRULE;
            // console.log(this.tableData);
        },

        // 当前点击菜单是否展示当前规则校验
        getInitData(row) {
            this.rowObj = row;
            console.log(row.menuName);
            this.labelValue = `${row.menuName} - 客户视图 - 校验规则`;
            if (row.category === '2') {
                this.ruleTableflag = true;
            } else {
                this.ruleTableflag = false;
                return;
            }
            this.$nextTick(() => {
                this.getDictDetailIdsByMenuId();
            });
        },
        // 用户点击b保存按钮，保存当前校验
        handlewherherOrbind() {
            const VALIDRULE_SAFETY = this.radioSAFETY;
            const VALIDRULE = this.$refs.VALIDRULE.getCheckedKeys();
            const VALIDRULE_CARD_STATUS = this.$refs.VALIDRULE_CARD_STATUS.getCheckedKeys();
            const VALIDRULE_ACCOUNT_TYPE = this.$refs.VALIDRULE_ACCOUNT_TYPE.getCheckedKeys();
            this.selections = [
                ...VALIDRULE,
                VALIDRULE_SAFETY,
                ...VALIDRULE_CARD_STATUS,
                ...VALIDRULE_ACCOUNT_TYPE,
            ];
            // console.log(this.selections);
            const params = {
                id: this.rowObj.id,
                ids: this.selections,
            };
            this.$post.nebulaApi.menuRule(params).then((res) => {
                if (res.data.success) {
                    this.$message.success('操作成功！');
                } else {
                    this.$message.error('操作失败！');
                }
            });
        },
        addMenu(node, data) {
            console.log('node__系统菜单', node);
            console.log('data————系统菜单', data);
            this.EditTitle = '添加菜单';
            this.form = {};
            this.form.isUsable = '1';
            this.form.isVisible = '1';
            this.form.parentSid = data.id;
            this.form.category = '1';
            this.flag = true;
            this.Show = true;
            // 解决一进来就进行表单验证问题
            if (this.$refs.form) {
                this.$refs.form.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.form.resetFields();
                });
            }
        },
        editMenu(node, data) {
            this.EditTitle = '编辑菜单';
            this.form = JSON.parse(JSON.stringify(data));
            this.flag = true;
            if (data.parentSid === 0) {
                // 编辑一级菜单时，上级菜单也不展示
                this.flag = false;
            }
            this.Show = true;
            if (this.$refs.form) {
                this.$refs.form.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.form.resetFields();
                });
            }
        },
        deleteMenu(node, data) {
            this.$confirm('确认删除该菜单及其下的子菜单？', '提示', {
                customClass: 'warning', type: 'warning',
            })
                .then(() => {
                    this.$post.nebulaApi.deleteMenu({ id: data.id }).then(
                        (res) => {
                            if (res.data.success) {
                                this.$message.success(res.data.content);
                                this.getMenuInfo();
                            } else {
                                this.$message.error(err.msg);
                            }
                        },
                        (err) => {
                            this.$message.error(err.msg);
                        }
                    );
                })
                .catch(() => { });
        },
        // 重新查菜单
        getMenuInfo() {
            let type = null;
            if (this.$route.path === '/manage/menusetting') {
                type = '1';
            } else {
                type = '2';
            }
            const param = { category: type };
            this.$post.nebulaApi.setMenuListInfo(param).then(
                (res) => {
                    this.menuList = res.data.content;
                },
                (err) => {
                    this.$message.error(err);
                }
            );
        },
        // 
        submitEdit() {
            if (this.form.id) {
                // 编辑
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.$post.nebulaApi.updateMenu(this.form).then(
                            (res) => {
                                if (res.data.success) {
                                    this.getMenuInfo();
                                    this.Show = false;
                                    this.$message.success(res.data.content);
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            },
                            (err) => {
                                this.$message.error(err.message);
                            }
                        );
                    } else {
                        return false;
                    }
                });
            } else {
                // 添加 系统菜单
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.$post.nebulaApi.addMenu(this.form).then((res) => {
                            if (res.data.success) {
                                this.$message.success(res.data.content);
                                this.getMenuInfo();
                                this.Show = false;
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        });
                    } else {
                        return false;
                    }
                });
            }
        },
    },
    components: {
        SelectTree,
    },
};
</script>

<style lang='scss' scoped>
/deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: transparent !important;
}

/deep/ .app-main-container .app-main .menu-container .el-scrollbar,
.app-main-container .app-main .menu-container .el-tree {
    background: transparent !important;
    height: 100%;
}

.validrule-tabel {
    .el-tree {
        display: flex;
        flex-wrap: wrap;
        .el-tree-node {
            flex-basis: 200px;
            // background: red;
        }
    }
}
.menu-container {
    .leftBtm {
        float: right;
        margin-right: 20px;
        margin-bottom: 5px;
    }
    .bgimg {
        width: auto;
        margin-left: 20px;
        margin-top: 0px;
        img {
            border-radius: 5px;
        }
    }
}
</style>

<style lang='scss'>
/* #menu-content /deep/ .side-bar-scrollbar-wrap,
#grid-content /deep/ .side-bar-scrollbar-wrap {
    max-height: 700px;
    min-height: 700px;
    height: 100%;
} */
.input_width {
    min-width: 200px;
    display: inline-block;
}
#menu-content {
    height: 100%;
    padding: 5px;

    .el-scrollbar {
        height: 94%;
        width: 100%;
        /* background-color: #8bc34a99; */
        border-radius: 10px;
        .el-scrollbar__wrap {
            overflow: scroll;
            height: 99%;
            overflow-y: auto;
        }
    }
}
.menu-container,
.el-col-8,
.el-row,
.bg-purple-dark,
.el-scrollbar {
    height: 100%;
}
.app-main-container .app-main {
    // background: #fff;
    .menu-container {
        background: #fff;
        padding: 20px;
        .menu_container_body {
            height: 100% !important;
        }
        .el-scrollbar,
        .el-tree {
            height: 100%;
        }
    }
    .bg-purple-dark > div {
        height: 100%;
    }
    .el-tree-node__content:hover {
        background-color: #ecf5ff !important;
    }
}
#menu-content /deep/ .side-bar-scrollbar-wrap,
#grid-content /deep/ .side-bar-scrollbar-wrap {
    max-height: 700px;
    min-height: 700px;
}
.menu-container,
.el-col-8,
.bg-purple-dark,
.el-scrollbar {
    height: 100%;
}
.bg-purple-dark > div {
    height: 100%;
}
.el-tree-node__content:hover {
    background-color: #ecf5ff !important;
}

.noBack {
    background: transparent !important;
}
.menuIcon {
    position: absolute;
    right: 3%;
    display: none;
    background: #f5f7fa;
    i {
        color: #409eff;
        font-size: 16px;
    }
    .el-icon-edit {
        margin: 0 4px;
    }
}
.el-tree-node__content:hover .menuIcon {
    display: inline-block;
}
</style>
